<template>
  <div>
    <div style="margin: 10px 0;">
      <el-upload :action="'http://' + serverIp + ':8081/file/upload'" :show-file-list="false"
                 :on-success="handleFileUploadSuccess" style="display: inline-block">
        <el-button type="primary" class="ml-5">上传文件 <i class="el-icon-top"></i></el-button>
      </el-upload>
      <el-popconfirm
          style="margin-left: 5px"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
      <el-input placeholder="请输入文件名称查询" v-model="name" clearable style="width: 200px;margin-left: 10px"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 5px" @click="search">查询</el-button>
      <el-button type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="reset">重置</el-button>
    </div>


    <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%"
              :header-cell-style="{background:'#e7e8ef',color:'#4f5257'}"
               fixed border>
      <el-table-column
          prop="id"
          type="selection"
          width="40">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="120">
      </el-table-column>
      <el-table-column prop="name" label="文件名称" width="200">
      </el-table-column>
      <el-table-column prop="type" label="文件类型" >
      </el-table-column>
      <el-table-column prop="size" label="文件大小(MB)" >
      </el-table-column>

      <el-table-column label="预览" width="120">
        <template slot-scope="scope">
          <el-button type="success" @click="preview(scope.row.url)">预览</el-button>
        </template>
      </el-table-column>
      <el-table-column label="下载" width="120">
        <template slot-scope="scope">
          <el-button type="primary" @click="download(scope.row.url)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="启用" width="120">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc"
                     @change="changeEnable(scope.row)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column
          label="操作"
          width="180">
        <template slot-scope="scope">
          <el-popconfirm
              style="margin-left: 5px"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button type="danger" size="mini" class="el-icon-remove-outline" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="js">

import {serverIp} from "../../public/config";

export default {
  name: "File",
  data(){
    return{
      serverIp: serverIp,
      tableData:[],
      name: '',
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.load()
  },
  methods:{
    reset(){
      this.name="";
      this.load()
      this.$message({
        message: '重置成功',
        type: 'success'
      });
    },
    search(){
      if (this.name!=''){
        this.load()
        this.$message({
          message: '查询成功',
          type: 'success'
        });
      }else{
        this.$message({
          message: '请输入查询内容',
          type: 'warning'
        });
      }
    },
    load(){
      this.request.get("/file/page",{
            params:{
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              name:this.name
            }
          }
      ).then(res =>{
        this.tableData=res.records
        this.total=res.total
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleDelete(index, row) {
      this.request.delete("/file/"+(index,row).id).then(res=>{
        if (res.data){
          this.load()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
      })
    },
    delBatch(){
      let ids = this.multipleSelection.map(v =>v.id)
      if (ids.length!=0){
        this.$confirm('你正在进行批量删除操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request.post("/file/batch/", ids).then(res => {
            if (res.data){
              this.load()
              this.$message({
                type: 'success',
                message: '批量删除成功!'
              });
            }else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }else {
        this.$message.warning("请选择删除记录")
      }
    },
    //启用or不启用
    changeEnable(row) {
      this.request.post("/file/enable", row).then(res => {
        if (res.code === 200) {
          this.$message.success("操作成功")
        }
      })
    },
    /**
     * 选择框
     * */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (let i=1; i<=val; i++)
        console.log(this.multipleSelection[i])
    },
    /**
     * 自定义操作列
     * @param index
     * @param row
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.load()
    },
    handleCurrentChange(val) {
      this.pageNum=val
      this.load()
    },
    handleFileUploadSuccess(res) {
      this.$message.success("上传成功")
      this.load()
    },
    download(url) {
      window.open(url)
    },
    preview(url) {
      window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url))))
    },
  }
}
</script>

<style scoped>

</style>